<template>
  <div>
    <div class="top">
      <div class="fl top-left">考核人员列表</div>
      <el-input size="small" class="fr top-right" suffix-icon="el-icon-search" clearable @input="getData()" v-model="tiaojian.name" placeholder="请输入搜索的名称" />
    </div>
    <div class="body">
      <div class="head">
        <!-- <div class="fl">考核状态：</div>
        <el-select size="mini" filterable v-model="tiaojian.status" @change="getData()" style="width:150px;margin-right:20px">
          <el-option
            v-for="item in type_zhuangtai"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select> -->
        <div class="fl">考核年限：</div>
        <el-date-picker
          style="width:150px;margin-right:20px"
          size="mini"
          value-format="yyyy"
          v-model="tiaojian.year"
          @change="getData()"
          type="year"
          placeholder="选择年">
        </el-date-picker>
        <div class="fl">级别：</div>
        <el-cascader
          filterable
          style="width:400px;margin-right:20px"
          size="mini"
          v-model="tiaojians"
          :options="type_all"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="getData()"
          clearable>
        </el-cascader>
        <!-- <el-button type="primary" size="small" @click="getData()">重置</el-button>
        <el-button type="primary" size="small" @click="getData()">查询</el-button> -->
      </div>
      <el-button type="primary" size="small" style="margin-top:0px;margin-bottom:20px" @click="add()">新增考核</el-button>

      <div v-for="(item, index) in tableData" :key="index" class="card shou" :style="getStyle(item)" @click="toInfo(item)">
        <div style="font-size: 16px;color:#333333" v-html="item.name"></div>
        <div style="font-size: 14px;color:#666666">
          <div class="fl">
            <p v-html="item.name"></p>
            <!-- <span v-if="item.paper">{{item.paper.name||'-'}}</span>
            <span v-else>-</span> -->
            <!-- <span style="margin:0 10px;color:#D6D6D6;font-size:18px">|</span>13考场 -->
          </div>
          <i class="el-icon-arrow-right fr" style="font-size: 20px;font-weight:800;color: rgba(0, 0, 0, 0.5)"></i>
          <div class="fr" v-if="item.statusId==3" style="font-size: 18px;font-weight:bold;color: rgba(0, 0, 0, 0.5)">已结束</div>
        </div>
        <div style="font-size: 16px;color:#666666">
          <el-button type="primary" size="mini" @click.stop="chakan(item)">查看试卷</el-button>
          <el-button v-if="item.statusId==1" type="" size="mini">暂未考核</el-button>
          <el-button v-if="item.statusId==2" type="" size="mini">正在考核</el-button>
          <el-button v-if="item.statusId==3" type="" size="mini">考核结束</el-button>
          <!-- <el-button v-if="true" type="primary" size="mini" @click.stop="tingyong()">停用考核</el-button> -->
          <el-button v-if="item.statusId==3" :type="item.statusId==3?'primary':''" title="考核结束才可以查看考核统计" size="mini" @click.stop="tongji(item)">查看考核统计</el-button>
        </div>
      </div>

      <div style="width:100%;height:30px;margin-top: 24px;">
        <el-pagination
          style="float:right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :hide-on-single-page="false"
          :current-page="tiaojian.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="tiaojian.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="维护数据" style="min-width:900px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">姓名：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="small" v-model="form.name" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">身份证号：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="small" v-model="form.name" />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.leftClassTimes===''||form.totalClassTimes===''" type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      span1: 5,
      span2: 7,
      type_all: [],
      tiaojians: [],
      dialog_tiaojians: [],
      type_zhuangtai: [{
        name: '全部',
        value: ''
      }, {
        name: '启用',
        value: false
      }, {
        name: '停用',
        value: true
      }],
      tableData: [],
      total: 0,
      tiaojian: {
        page: 1,
        size: 10,
        name: '',
        year: '',
        rankId: '', // 级别id
        departmentId: '', //部门id
        positionId: '', // 岗位id
        professionId: '' // 专业id
      },
      form: {
        computerEndDatetime: '', // 上机结束时间
        computerPlace: '', // 上机地点
        computerStartDatetime: '', // 上机考试时间
        departmentId: '', // 部门
        endDatetime: '', // 结束时间
        examExaminees: [ // 考场-考生，只用填考生id
          {
            examId: '',
            examineeAnswer: '',
            examineeId: '',
            isRight: true,
            questionId: '',
            score: ''
          }
        ],
        examExaminers: [ // 考场-对-考官，只用填考官id
          {
            examId: '',
            examinerId: ''
          }
        ],
        excellentScore: '', // 优秀分数线
        qualifyScore: '', // 及格分数线
        id: '',
        name: '', // 考场名称
        paperId: '', // 试卷
        place: '', // 考场地点
        positionId: '', // 岗位
        professionId: '', // 专业
        rankId: '', // 级别
        startDatetime: '', // 开始时间
        statusId: '' // 考核状态标识
      }
    }
  },
  watch: {
    'form.name' () {
      this.getZhuanye()
    }
  },
  mounted() {
    console.log(this.$route)
    this.getData()
    this.getAll()
  },
  methods: {
    getStyle(item) {
      let str = 'border: 1px solid rgba(24, 144, 255, 1);'
      if(item.statusId==2) {
        str = 'background-color: rgba(225, 241, 255, 1);'
      }
      if(item.statusId==3) {
        str = 'border: 1px solid rgba(217, 217, 217, 1);'
      }
      return str
    },
    getData() {
      this.tiaojian.rankId = this.tiaojians.length > 0?this.tiaojians[0]:''
      this.tiaojian.departmentId = this.tiaojians.length > 1?this.tiaojians[1]:''
      this.tiaojian.positionId = this.tiaojians.length > 2?this.tiaojians[2]:''
      this.tiaojian.professionId = this.tiaojians.length > 3?this.tiaojians[3]:''
      $http.get('/admin/exam/getlist', {params:this.tiaojian}).then(response => {
        if (response.success) {
          let name = '<span style=\"color:red\">' + this.tiaojian.name + '</span>'
          let table = []
          let query = {}
          let str = ''
          for (let i = 0; i < response.data.list.length; i++) {
            let query = response.data.list[i]
            if (this.tiaojian.name !== '') {
              str = response.data.list[i].name.replace(this.tiaojian.name, name)
              query.name = '<span>' + str + '</span>'
            }
            table.push(query)
          }
          this.tableData = table
          this.total = response.data.total
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    getAll() {
      $http.get('/examinee/grade/get/all').then(response => {
        if (response.success) {
          this.type_all = response.data
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    add() {
      this.$router.push({
        path: '/examPlan/examAdd'
      })
    },
    chakan(item) {
      this.$router.push({
        path: '/examPlan/exam',
        query: {
          id: item.paper.id
        }
      })
    },
    tongji(item) {
      this.$router.push({
        path: '/examPlan/census',
        query: {
          id: item.id
        }
      })
    },
    toInfo(item) {
      this.$router.push({
        path: '/examPlan/examInfo',
        query: {
          id: item.id
        }
      })
    },
    xiugai() {
      this.form = {}
      this.dialogFormVisible = true
    },
    tingyong () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    submit() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  margin-bottom: 20px;
  width:100%;
  height: 32px;
  display: flex;
  align-items: center;
}
.label{
  margin-right: 9px;
  min-width: 87px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(24, 144, 255, 1);
  font-size: 14px;
  color: rgba(24, 144, 255, 1);
}
.top{
  width:100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left{
  line-height:30px;
  font-size: 20px;
  color: #333333;
}
.top-right{
  width: 272px;
  line-height:30px;
}
.body{
  margin:24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.card{
  margin-bottom: 12px;
  width:100%;
  height: 147px;
  padding: 22px 14px 18px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}
</style>
